<template>
    <div class="jianzhan-content">
        <Crumb name="Cost"></Crumb>
        <div class="content">
            <Search>
                <el-input
                        v-model="key"
                        size="small"
                        class="input"
                        placeholder="Ship"
                        prefix-icon="el-icon-search"
                ></el-input>
                <el-button size="small" type="primary" class="input" @click="download">下载Excel</el-button>
            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="costList"
                        show-summary
                        :summary-method="getSummary"
                        v-loading="loading"
                        element-loading-text="拼命加载中"
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(0, 0, 0, 0.8)"
                        :span-method="cellMerge"
                        max-height="750"
                        border
                        :cell-style="{borderColor:'#000'}"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            fixed
                            width="180px"
                            prop="shipInformation"
                            label="船次">
                    </el-table-column>
                    <el-table-column
                            width="270px"
                            prop="sendOrderNumber"
                            label="SHI-IEL">
                        <template slot-scope="scope">
                            <ul>
                                <li v-for="item in scope.row.shIelInformation" :key="item">
                                    {{item}}
                                </li>
                                <li style="float:right;" v-if="scope.row.shIelSum">SUM:¥{{scope.row.shIelSum | money}}</li>

                            </ul>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="billOfLading"
                            width="180px"
                            label="BL">
                        <template slot-scope="scope">
                            <span>{{scope.row.billOfLading}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="billOfLadingDate"
                            label="BL日期">
                        <template slot-scope="scope">
                            <span>{{scope.row.billOfLadingDate}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            width="220px"
                            prop="invoice"
                            label="发票号">
                        <template slot-scope="scope">
                            <span>{{scope.row.invoice}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            width="200px"
                            prop="invoicePrice"
                            align="right"
                            label="发票RMB">
                        <template slot-scope="scope">
                            <span>{{scope.row.invoicePrice | money}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            width="200px"
                            prop="invoicePriceUS"
                            align="right"
                            label="发票USD">
                        <template slot-scope="scope">
                            <span>{{scope.row.invoicePriceUS | money}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="formENumber"
                            width="220px"
                            label="FORME">
                        <template slot-scope="scope">
                            <span>{{scope.row.FORME}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            width="200px"
                            prop="formEPrice"
                            align="right"
                            label="FORME金额">
                        <template slot-scope="scope">
                            <span>{{scope.row.formEPrice | money}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="pibAju"
                            width="220px"
                            label="PIBAJU">
                        <template slot-scope="scope">
                            <span>{{scope.row.PIBAJU}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            width="200px"
                            prop="pibPrice"
                            align="right"
                            label="PIB(IDR)">
                        <template slot-scope="scope">
                            <span>{{scope.row.pibPrice | money}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            width="200px"
                            prop="ppn"
                            align="right"
                            label="PPN">
                        <template slot-scope="scope">
                            <span>{{scope.row.ppn | money}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            width="200px"
                            prop="pph"
                            align="right"
                            label="PPH">
                        <template slot-scope="scope">
                            <span>{{scope.row.pph | money}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            width="200px"
                            prop="bm"
                            align="right"
                            label="BM">
                        <template slot-scope="scope">
                            <span>{{scope.row.bm | money}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="seaCurRate"
                            label="seaFright currency rate"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="seaFrightUnitPrice"
                            label="seaFright unit price"
                    >
                    </el-table-column>
                    <el-table-column
                            width="200px"
                            align="right"
                            prop="seaFrightPrice"
                            label="SEA FRIGHT">
                        <template slot-scope="scope">
                            <span>{{scope.row.seaFrightPrice | money}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            width="200px"
                            prop="handlingFee"
                            align="right"
                            label="Handling FEE">
                        <template slot-scope="scope">
                            <span>{{scope.row.handlingFee | money}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            width="180px"
                            prop="groundCost"
                            label="Land Fee"
                    >
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            prop="sumPrice"
                            width="200px"
                            label="Sum">
                        <!--<template slot-scope="scope">-->
                            <!--<span>{{totalPrice(scope.row.pibPrice , scope.row.seaFrightPrice, scope.row.handlingFee)}}</span>-->
                        <!--</template>-->
                    </el-table-column>
                    <el-table-column
                            width="270px"
                            prop="sendOrderNumber"
                            label="IEL-C">
                        <template slot-scope="scope">
                            <ul>
                                <li v-for="item in scope.row.ielCustomerInformation" :key="item">
                                    {{item}}
                                </li>
                                <li style="float:right;" v-if="scope.row.ielCustomerSum">SUM:Rp{{scope.row.ielCustomerSum | money}}</li>
                            </ul>
                        </template>
                    </el-table-column>


                </el-table>
                <div class="page">
                    <el-pagination background
                                   :page-size="pageSize"
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"></el-pagination>
                </div>

            </div>

        </div>
    </div>
</template>

<script>
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'
    import mixins from '../../util/mixins'
    import authMixins from '../../util/authMixins'
    import {ERROR_OK} from "../../util/config";
    import {baseURL, getFileName,money} from "../../util";

    import {getCost} from '../../api/jianzhan'


    export default {
        name: "export",
        mixins: [mixins, authMixins],
        data() {
            return {
                loading: true,
                key: '',
                showInvoiceMessage: [],
                spanArr: [],
                pos: ''
            }
        },
        filters: {
            getName(name) {
                return getFileName(name)
            },
            money(m){
                return money(m)
            }
        },
        created() {
            // this.getExportList();
            this.showInvoice();
        },
        computed: {
            costList() {
                return this.showInvoiceMessage.filter(item => item.shipInformation.includes(this.key)).slice((this.pageNum - 1) * this.pageSize, this.pageNum * this.pageSize)
            }
        },
        methods: {
            getSummary(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = 'Sum';
                        return;
                    }
                    // let total = 0
                    // this.showInvoiceMessage.forEach(item=> {
                    //     total += this.totalPrice(item.pibPrice,item.seaFrightPrice,item.handlingFee)
                    // });
                    // total = total.toFixed(0)
                    let values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] = money(sums[index].toFixed(2));
                        sums[2] = '';
                        sums[3] = '';
                        sums[4] = '';
                        sums[7] = '';
                        sums[9] = '';
                        sums[15] = '';
                        sums[14] = '';

                    } else {
                        sums[index] = 'N/A';
                        // sums[16] = money(total);
                    }
                });

                return sums;
            },
            totalPrice(p1,p2,p3) {
                p1 = parseFloat(p1) || 0;
                p2 = parseFloat(p2) || 0;
                p3 = parseFloat(p3) || 0;
                return p1 + p2 + p3
            },
            download() {
                window.open(baseURL + '/jianzhan_import_and_export/manage//cost_excel.file');
            },
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },

            async showInvoice() {
                const {status, data, msg} = await getCost();
                if (status === ERROR_OK) {
                    this.showInvoiceMessage = data;
                    this.loading = false;
                    for (let i = 0; i < data.length; i++) {
                        if (i === 0) {
                            this.spanArr.push(1);
                            this.pos = 0
                        } else {
                            if (data[i].shipInformation === data[i - 1].shipInformation) {
                                this.spanArr[this.pos] += 1;
                                this.spanArr.push(0);
                            } else {
                                this.spanArr.push(1);
                                this.pos = i;
                            }
                        }
                    }
                } else {
                    this.$notify.error(msg)
                }
            },

            //  船次发运合同号合并
            // eslint-disable-next-line
            cellMerge({row, column, rowIndex, columnIndex}) {
                if (columnIndex === 0 || columnIndex === 1 ) {
                    return {
                        rowspan: this.spanArr[rowIndex],
                        colspan: this.spanArr[rowIndex] > 0 ? 1 : 0
                    }
                }
            }
        },
        watch: {
            exportList(list) {
                this.total = list.length
            }
        },
        components: {
            Crumb, Search
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";
    @import "../../css/variable";

    .content {
        @include content
    }

    .label-btn {
        @include linkBtn
    }

    .ship {
        position: relative;
        &:hover {
            .shipList {
                display: block;
            }
        }
    }

    .label-btn {
        display: block;
        width: 150px;
        height: 30px;
        line-height: 30px;
        background-color: $bg-theme;
        color: white;
        padding: 0 5px;
        cursor: pointer;
        border-radius: 3px;
        text-align: center;
    }

    .file-list {
        font-size: 16px;
        .file-item {
            height: 25px;
            line-height: 25px;
            border-bottom: 1px solid #ddd;

        }
    }
</style>